<template>
  <div id="v-no-border-select">
    <el-select v-model="selValue" :placeholder="placeholder" @change="change" :style="{ width: `${width}px` }">
      <el-option
      v-for="item in options"
      :key="item[itemKey]"
      :label="item[itemValue]"
      :value="item[itemKey]">
      </el-option>
    </el-select>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      value: {
        type: String
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      options: {
        type: Array
      },
      width: {
        type: Number,
        default: 105
      },
      itemKey: {
        type: String,
        default: 'value'
      },
      itemValue: {
        type: String,
        default: 'label'
      }
    },
    data () {
      return {
        selValue: ''
      }
    },
    methods: {
      change (val) {
        this.options.forEach((item) => {
          if (item[this.itemKey] === val) {
            this.$emit('on-change', item)
          }
        })
      }
//      getItemKey (item) {
//        for (let key in item) {
//          if (key === this.itemKey) {
//            return item[this.itemKey]
//          }
//        }
//      },
//      getItemVal (item) {
//        for (let key in item) {
//          if (key === this.itemValue) {
//            return item[this.itemValue]
//          }
//        }
//      }
    },
    created () {
      this.selValue = this.value
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #no-border-select
    .el-input__inner
      background #016DFB
      border 1px solid #016DFB
      color #fff
    .el-select .el-input .el-select__caret
      color #fff
    .el-input__inner:hover, el-select:hover
      border-color #016DFB
    ::-moz-placeholder /* Mozilla Firefox 19+ */
      color #fff
    input:-ms-input-placeholder
      color #fff
    input::-webkit-input-placeholder
      color #fff
</style>
